<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页标题</title>
		<link rel="stylesheet" href="styles/public.css">
		<link rel="stylesheet" href="styles/index.css">
		<style>
			.navbar-top li.one {
				position: relative;
			}
			.navbar-top .figure {
				width: 0;
				border:6px solid transparent;
				border-top: 6px solid #fff;
				position: absolute;
				right: 30px;
				top: 23px;
			}
			.navbar-top li.one:hover .figure{
				border-top: 6px solid #c5842d;
			}
			.navbar-top .nav-details {
				position: absolute;
				right: 20px;
				top: 100%;
				width: 160px;
				z-index: 999;
				opacity: 0;
				background: rgba(0,0,0,.7);
				transition:all .8s;
				
			}
			.navbar-top .nav-details > a {
				padding: 10px 0 10px 50px;
				display: block;
				color: #000;
				font-size: 16px;
			}
			.navbar-top li.one:hover .nav-details{
				opacity: 1;
				top:0px;
			}
			.navbar-top .nav-details a:hover{
				color: #fff;
				background: rgba(0,0,0,.4);
			 }
			 
		</style>
	</head>
	<body>
	 <header>
		    <img src="images/logo.png" alt="">
	 </header>
	 <nav class="navbar-top"><!--适用于移动端 需要考虑百分比，一般用宽度来写导航-->
		   <ul>
					<li class='active'><a href="index.html">首页</a></li>
					<li><a href="#">关于伊森</a></li>
					<li class='one'><a href="#">木制表</a>
						<div class='figure'></div>
						<div class='nav-details'>
							<a href="">产品详细</a>
							<a href="">产品系列</a>
							<a href="">产品列表</a>
							<a href="">男女装</a>
						</div>
					</li>
					<li class='one'><a href="#">腕表动态</a>
						<div class='figure'></div>
						<div class='nav-details'>
							<a href="">新闻详细</a>
							<a href="">新闻列表</a>
						</div>
					</li>
					<li><a href="#">联系伊森</a></li>
					<li><a href="#">售后维修</a></li>
		   </ul>
		</nav>
	</body>
</html>